<template>
  <div>
    <span>姓名：{{ person.name }}<br></span>
    <span>性别：{{ person.age }}<br></span>
    <span v-show="person.job">工作：{{ person.job }}<br></span>
    <span>{{ person.a.c.d }}<br></span>
    <button @click="changePerson">点我切换</button>
    <HelloWorld :name="person.name" @demo="show">
      <template v-slot:school>
        <div><h2>中南民族大学</h2></div>
      </template>
    </HelloWorld>
  </div>
</template>

<script>
// import { h } from 'vue';
import HelloWorld from './components/HelloWorld.vue';
import {ref,reactive} from 'vue'
export default {
  name: 'App',
  setup(){
    let person = reactive({
      name:'张扬',
      age:22,
      job:'',
      a:{
        c:{
          d:'测试数据'
        }
      }
    })
    function changePerson(){
      person.name='郑梦婷'
      person.age=21
      person.job = '测试工程师',
      person.a.c.d = '测试成功'
    }
    function show(){
      alert('触发了事件')
    }
    // 返回向外暴露出的数据，不暴露则模板中读取不到
    return {
      person,
      changePerson,
      show
    }

    // 返回一个渲染函数(做了解)
    // return ()=>{ return h('h1','中南民族大学')}
    // return ()=> h('h2','网络工程')
  },
  components:{HelloWorld}
}
</script>

<style>

</style>
